<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/index/order' }">订单列表详情</el-breadcrumb-item>
    <el-breadcrumb-item >搜索订单</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card class="box-card">
    <el-input v-model="search" size="default" placeholder="搜索订单" style="width:50%;float:left" autofocus />
    <el-button size="default" color="lightblue" style="float:left;margin-left:14px;margin-bottom:20px" @click="searchOrder(search)">搜索</el-button>
<!-- 查询的订单 -->
<el-table :data="User.list" style="width: 100%;text-align: center;">
    <el-table-column label="订单号" prop="orderid" width="160px"/>
    <el-table-column label="下单时间" prop="time" width="100px"/>
    <el-table-column label="商品价格" prop="price" width="100px"/>
    <el-table-column label="用户姓名" prop="name" width="80px"/>
    <el-table-column label="用户电话" prop="phone" width="160px"/>
    <el-table-column label="收货地址" prop="address" />
    <el-table-column label="订单状态" prop="status" width="130px" />
    <el-table-column align="right" width="200px">
      <template #default="scope">
              <el-button 
              size="small"
              @click="handleEdit(scope.row)"
            >详情</el-button>
            <el-button 
              size="small"
              @click="orderEdit(scope.row)"
            >编辑</el-button>
        <el-button
          :plain="true"
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  </el-card>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import axios from 'axios'
import {  onMounted, ref,reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
import { order_dellist, order_search } from '../../../utils/api'
var $router =useRouter()
//获取输入框内容
const search = ref('')
// 订单数据详情
const User=ref({list:[]})

// 订单详情
const handleEdit = (row) => {
  $router.push({
    path:'/index/orderlist',
    query:{
      order:row.orderid
    }
  })
  // console.log(row.orderid)
}
// 更改订单
const orderEdit=(row)=>{
  $router.push({
    path:'/index/editorder',
    query:row
  })
}
// 删除订单
const handleDelete = (row) => {
  order_dellist(row.orderid).then((res)=>{
    User.value.list=res.data.list

  })
  // axios.post('/api/order/dellist',{id:row.orderid}).then((res)=>{
  //   User.value.list=res.data.list
  //   console.log(res.data)
  // })
  ElMessage({
    message: '该订单已删除',
    type: 'success',
  })
}
// 根据输入框中的订单号进行搜索
const searchOrder=(a)=>{
    if(a==''){
        ElMessage.error('订单号不能为空')
    }else{
      order_search(a).then((res)=>{
        if(res.data.code==200){
                User.value.list=res.data.list
                console.log(User.value.list)
                
            }else{
                ElMessage.error('查询订单不存在')
            }
      })
        // axios.post('/api/order/search',{id:a}).then((res)=>{
        //     if(res.data.code==200){
        //         User.value.list=res.data.list
        //         console.log(User.value.list)
                
        //     }else{
        //         ElMessage.error('查询订单不存在')
        //     }
        // })
    }
    search.value=""
}
</script>

<style scoped>
 .el-breadcrumb {
  height: 40px;
  margin-bottom: 10px;
  line-height: 40px;
}
.el-card {
    width: 100%;
    padding:  10px;
}
.el-table{
    margin-top: 20px;
}
</style>